<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
            perspective: 2000px;
            transform-style: preserve-3d;
            user-select: none;
        }
        .content{
            position: relative;
            width: 500px;
            height: 300px;
            border-radius: 30px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content:hover{
            cursor: pointer;
        }
        .content:hover>img{
            filter: grayscale(90%);
        }
        .content:hover>h1{
            margin-top: -30%;
            color: yellow;   
        }
        .content:hover>.share{
            transform: rotateZ(-45deg);
        }
        .content:hover>.title{
            opacity: 1;
            animation: animation 3s linear 0s infinite normal none;
        }
        .content img{
            position: absolute;
            z-index: -10;
            width: 100%;
            height: 100%;
            transition: all ease-in-out 0.5s;
            filter: grayscale(40%);
        }
        .content h1{
            width: 50%;
            transition: all linear 0.3s;
            text-align: center;
            border: 3px solid black;
        }
        .share{
            transform-origin: top;
            margin-top: 100%;
            position: absolute;
            width: 150%;
            height: 100px;
            transition: all ease-in-out 0.5s;
            background-color: yellow;
        }
        .icon{
            position: relative;
            width: 20px;
            height: 20px;
            float: right;
            display: flex;
            flex-direction: row-reverse;
            margin-right: 5%;
        }
        .box{
            margin-top: 30px;
            margin-right: 30px;
            width: 100%;
            height: 100%;
        }
        .box img{
            border: 1px solid black;
            border-radius: 50%;  
        }
        .title{
            transition: opacity ease-in-out 0.3s;
            position: absolute;
            opacity: 0;
            margin-top: 10%;
            font-size: 100px;
        }
        @keyframes animation {
            0%{
                transform: translateX(0px);
            }
            5%{
                transform: translateX(25px);
            }
            10%{
                transform: translateX(34px);
            }
            30%{
                transform: translateX(25px);
            }
            35%{
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="./img/汉堡.jpg" alt="汉堡">
        <h1>Hover Me</h1>
        <span class='title'>--></span>
        <div class="share">
            <div class="icon">
                <div class="box"><img src="./img/facebook.png"></div>
                <div class="box"><img src="./img/GitHub.png"></div>
                <div class="box"><img src="./img/ins.png"></div>
                <div class="box"><img src="./img/qq.png"></div>
                <div class="box"><img src="./img/wechat.png"></div>
                <div class="box"><img src="./img/weibo.png"></div>
            </div>
        </div>
    </div>
</body>
</html>